<!DOCTYPE html>
<html>
<head>
<title>CSS borders lookin' good</title>
<style>
div + div {
    margin-top: 20px;
}
#foo {
    border-top-color: red;
    border-right-color: lime;
    border-bottom-color: blue;
    border-left-color: yellow;

    border-top-width: 40px;
    border-right-width: 30px;
    border-bottom-width: 20px;
    border-left-width: 10px;

    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
}
#bar {
	border: 30px solid orange;
}
#bene {
	border: solid;
}
#salvete {
	border: 30px;
	border-color: grey;
	border-style: solid;
}
#amici {
	border: aquamarine;
	border-width: 30px;
	border-style: solid;
}
#resetting {
	border: 100px;
	border: orange;
	border: solid;
}
#three-px-solid-blue-separate {
	border-width: 3px;
	border-style: solid;
	border-color: blue;
}
#three-px-solid-blue {
	border: 3px solid blue;
}
#foo-but-actually-reset {
    border-top-color: red;
    border-right-color: lime;
    border-bottom-color: blue;
    border-left-color: yellow;

    border-top-width: 40px;
    border-right-width: 30px;
    border-bottom-width: 20px;
    border-left-width: 10px;

    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;

    border: solid;
}
#double-width {
	border: 50px 100px solid red;
}
#double-style {
	border: 50px solid dotted red;
}
#double-color {
	border: 50px solid red blue;
}
#double-width-solo {
	border: 50px 100px;
}
#double-style-solo {
	border: solid dotted;
}
#double-color-solo {
	border: red blue;
}
#dotted-1px {
    border: 1px dotted blue;
}
#dotted-5px {
    border: 5px dotted blue;
}
#dotted-20px {
    border: 20px dotted blue;
}
#dashed-1px {
    border: 1px dashed blue;
}
#dashed-5px {
    border: 5px dashed blue;
}
#dashed-20px {
    border: 20px dashed blue;
}
#mixed {
    border-top-width: 20px;
    border-top-style: dashed;
    border-top-color: red;

    border-left-width: 5px;
    border-left-style: solid;
    border-left-color: blue;

    border-bottom-width: 10px;
    border-bottom-style: dotted;
    border-bottom-color: lime;

    border-right-width: 10px;
    border-right-style: inset;
}
#two-part-border-attributes {
    height: 50px;
    border-color: red lime;
    border-width: 8px 6px;
    border-style: solid dashed;
}
#three-part-border-attributes {
    height: 50px;
    border-color: red lime blue;
    border-width: 8px 6px 4px;
    border-style: solid dashed dotted;
}
#four-part-border-attributes {
    height: 50px;
    border-color: red lime blue orange;
    border-width: 8px 6px 4px 2px;
    border-style: solid dashed dotted dotted;
}
</style>
</head>
<body>
<div id="foo">One day at a time!</div>
<div id="bar">Another day at another time!</div>
<div id="bene">bene</div>
<div id="salvete">salvete</div>
<div id="amici">amici</div>
<div id="resetting">resetting</div>
<div id="three-px-solid-blue-separate">three px solid blue separate</div>
<div id="three-px-solid-blue">three px solid blue</div>
<div id="foo-but-actually-reset">foo but actually reset</div>
<div id="double-width">double width</div>
<div id="double-style">double style</div>
<div id="double-color">double color</div>
<div id="double-width-solo">double width solo</div>
<div id="double-style-solo">double style solo</div>
<div id="double-color-solo">double color solo</div>
<div id="dotted-1px">dotted (1px)</div>
<div id="dotted-5px">dotted (5px)</div>
<div id="dotted-20px">dotted (20px)</div>
<div id="dashed-1px">dashed (1px)</div>
<div id="dashed-5px">dashed (5px)</div>
<div id="dashed-20px">dashed (20px)</div>
<div id="mixed">mixed</div>
<div id="two-part-border-attributes">two-part border attributes</div>
<div id="three-part-border-attributes">three-part border attributes</div>
<div id="four-part-border-attributes">four-part border attributes</div>
</body>
</html>
